<template>
    <div class="wrapper">
	  <swiper :options="swiperOption" ref="mySwiper">
        <!-- slides -->
        <swiper-slide v-for="item of swiperList" :key="item.id">
            <img class="swiper-img" :src="item.imgUrl"
             />
        </swiper-slide>
        <!-- Optional controls -->
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
    </div>
</template>

<script>
	export default{
		name: 'HomeSwiper',
		data () {
			return {
				swiperOption:{
                    pagination: '.swiper-pagination',
                    loop: true
                },
                swiperList: [{
                    id: '0001',
                    imgUrl:'http://img1.qunarzz.com/piao/fusion/1709/1f/de174549dd780902.jpg_640x200_e823c2f5.jpg'
                },{
                    id: '0002',
                    imgUrl:'http://img1.qunarzz.com/piao/fusion/1609/47/0cfdc871ac183702.jpg_640x200_1d98a02e.jpg'
                }]
			}
		}

	}

</script>
<style lang="stylus" scoped>
.wrapper  >>> .swiper-pagination-bullet-active
    background:#fff !important
.wrapper
    overflow:hidden
    width:100%
    height:0
    padding-bottom:31.25%
    background:#eee
    .swiper-pagination-bullet-active
    .swiper-img
        width:100%
        
</style>